<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
<title>商品购物车</title>
<link href="${ctxStatic }/site/themes/default/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="${ctxStatic }/site/themes/default/css/css.css" rel="stylesheet" type="text/css">
<script src="${ctxStatic }/site/themes/default/js/jquery.min.js"></script>
<script src="${ctxStatic }/site/themes/default/js/flat-ui.min.js"></script>
<script src="${ctxStatic }/site/themes/default/js/application.js"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="${ctxStatic}/site/themes/default/js/hideOptionMenu.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	
		$("#move").mouseover(function(){
			$("#moveshow").addClass("show");
			$("#moveUl").show();
		});
		
		$("#move").mouseout(function(){
			$("#moveshow").removeClass("show");
			setInterval("$('#moveUl').hide();",5000);
			
		});
	
	var h = $(document).height();
	$(".overlay").css({"height": h });	
	$(".action").click(function(){
		$(".overlay").css({'display':'block','opacity':'0.8'});
		$(".showbox").stop(true).animate({'margin-top':'500px','opacity':'1'},10);
		setTimeout(function(){
			$(".showbox").stop(true).animate({'margin-top':'400px','opacity':'0'},10);
			$(".overlay").css({'display':'none','opacity':'0'});
		},1000);
	});
});

function fnDisplay(pid){
	$('#fade'+pid).show();
	$('#light'+pid).show();
}
function fnCancel(pid){
	$('#fade'+pid).hide();
	$('#light'+pid).hide();
}

function fnDetermine(pid,uid,figure){
	$.get("${ctxMobileSite}/shopping/subtractShoppingCart?pid="+pid+"&uid="+uid, function(data){
		fnCancel(pid);
		
		//单个商品的总价
		var number = parseInt($("#number"+pid).html());
		var money = number * figure;
		
		//所有商品的数量
		var a = parseInt($("#quantum").html());
		//所有商品的总价
		var b = $("#prices").html();
		var c =  parseInt(b*100);
		
		var d = a-number;
		var f = (c-money)/100;
		
		$("#quantum").html(d);
		$("#qujiesuan").val("去结算（"+d+"）");
		$("#prices").html(f);
		$("#"+pid).remove();
	});
}

function fnTiJiao(){
	var a = parseInt($("#quantum").html());
	if(a>0){
		window.location.href='${ctxFront }/site/shopping/createCartPay?uid=${uid}&wechatId=${wechatId}';
	}else{
		alert('购物车中没有商品，快去商城中选择您心仪的商品吧！');
	}
}
</script>
<style type="text/css">

.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: gray;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .90;
	filter: alpha(opacity = 80);
}
/*
 * 登录层
 */
.white_content {
	display: none;
	position: absolute;
	top: 15%;
	left: 5%;
	width: 90%;
	border:2px #999999 solid;
	background-color: #ccc;
	z-index: 1002;
	color:#FFF;
	border:1px #aaa solid;
}
#light_title {
	text-align: center;
}
#light_login {
	text-align: center;
}
#cancel {
	width: 30%;
	height: 40px;
	float: right;
    margin-right: 10%;
	padding-top:10px;

}
#confirm {
	padding-top:10px;
	width: 30%;
	height: 40px;
	float: left;
		margin-left: 10%;
}
</style>
</head>
<body >

<div class="gridContainer clearfix" id="shopcar">
  <div id="LayoutDiv1" style="min-height: 390px;">
   <header>    
    <ul class="menu">  
    <span style=" font-size:18px; color:#FFF" class="left biaoti icon_left"   onclick="history.back(-1)" >购物车 </span>
			<li id="moveshow" > <a href="#" id="move"  ><span class="icon_menu right"></span></a>
				<ul id="moveUl"  style="display:none;">
						<jsp:include page="./right.jsp"></jsp:include>
				</ul>
			</li>			
		</ul>
    </header>
    <section class="clear">
     <c:if test="${empty productsList }">
		    <dl class=" fenleilist3" style="text-align:center;"  >
		    		<span>  暂无商品  </span>
		    </dl>
    </c:if>
	    <c:forEach items="${productsList }"  var="product"  >
		      <ul    id="${product.id}"  >
		        <li class="fontOrange">${product.name }</li>
		        <li class="clear">
		          <div class="tbl-cell" style="width:25%; text-align:center; "><img src="${ctxUser }/product/${product.indexPic}"></div>
		          <div class="tbl-cell" style=" width:70%; padding-left:3%; vertical-align:top;">
		            <p>${product.name }</p>
		            <p style="padding-top:20px;">
		           
		             <c:set var="key" value="${product.id }"/>
				          <c:forEach var="item" items="${map}">
								<c:if test="${item.key eq product.id  }">
								 <c:set var="count" value="${item.value}"/>
								 <span class="left">数量：<span id="number${product.id}">${item.value}</span></span>
								</c:if>
							</c:forEach>
		            <span class="right fontred">￥<fmt:formatNumber value="${product.price/100 }" pattern="0.00"/></span></p>
		          </div>           
		        </li>
		        <li style="background-color:#FFF;" ><div class="tbl-cell" style="width:100%;">商品合计：￥<fmt:formatNumber value="${product.price*count/100 }" pattern="0.00"/></div><div onclick="fnDisplay(${product.id})"  class="tbl-cell icon_delet"></div></li>
		        </ul>
		          <!--弹出层-->
		<div id="fade${product.id}" class="black_overlay">
			<div id="light${product.id}" class="white_content">
			  <p style="background-color:#000; height:40px; line-height: 40px;font-size: 16px;" id="light_title">请问您是否要删除这1种产品？</p>
			  <div id="confirm" style="line-height: 40px;margin-left: 20%;padding-top: 5px;"> 
			  	<!-- <span class="anniu Orange">确定</span>  -->
			  	<input onclick="fnDetermine(${product.id},${uid },${product.price});" class="anniu Orange" type="submit" value="确定"  style="padding: 5% 10% 5% 10%; margin:5%;color: #fff;font-size: 16px;" />
			  </div>
			  <div id="cancel" style="padding-top: 5px;line-height: 40px;"> 
			  	<input onclick="fnCancel(${product.id});" class="anniu Orange" type="submit" value="取消"  style="padding: 5% 10% 5% 10%; margin:5%;color: #fff;font-size: 16px;" />
			  	<%-- <span class="anniu Orange"  onclick="fnCancel(${product.id});">取消</span> --%>
			  </div>
			</div>
		</div>   
        </c:forEach>
    </section>
  </div>
<div class="jszch" style="margin-bottom: 70px;">技术支持：<a href="http://www.hdzhx.com/boxin/index.html" >智讯互联</a></div>
  <footer class="tbl-type detail-tbn2"  style="position: fixed; left: 0px; bottom: 0px; z-index: 10; display: table;">
    <div class="tbl-cell"><span class="font18">合计：</span><span class="fontOrange2">￥<span  id="prices" > <fmt:formatNumber value="${tatolPrice/100 }" pattern="0.00"/></span></span></div>
    <div class="tbl-cell"> 
    	<%-- <a href="${ctxFront }/site/shopping/createCartPay?uid=${uid}&wechatId=${wechatId}" class="btn-buy"><span></span>去结算（ --%>
    	<span id="quantum" style="display:none;" >${tatol}</span>
    	<!-- ）</a> -->
    	<c:if test="${tatol > 0}">
	    	<input id="qujiesuan" onclick="fnTiJiao();" class="anniu btn-buy" type="submit" value="去结算（${tatol}）"  style="padding: 5% 17% 5% 17%; margin:5%;color: #fff;font-size: 18px;" />
    	</c:if>
    	<c:if test="${tatol <= 0}">
    		<input id="qujiesuan" onclick="alert('购物车中没有商品，快去商城中选择您心仪的商品吧！');" class="anniu btn-buy" type="submit" value="去结算（${tatol}）"  style="padding: 5% 17% 5% 17%; margin:5%;color: #fff;font-size: 18px;" />
    	</c:if>
    </div>
  </footer>
</div>
</body>
</html>

